<template lang="pug">
  Card(:title='title')
    Form(ref='userSet',:model='formValidate',:rules='ruleValidate',:label-width='80',style="width: 500px")
      FormItem(label='用户名',prop='username')
        Input(v-model='formValidate.username',placeholder='用户名')
      FormItem(label='密码',prop='passwd')
        Input(v-model='formValidate.passwd',type='password',placeholder='密码')
      FormItem(label='联系电话',prop='tel')
        Input(v-model='formValidate.tel',placeholder='联系电话')
      FormItem(label='Email',prop='email')
        Input(v-model='formValidate.email',placeholder='Email')
      FormItem(label='用户权限')
        Select(v-model='formValidate.role')
          Option(v-for="(item, index) in roleItems",:value='item.value',:key="index") {{item.label}}
      FormItem
        Button(type='primary',style='marginRight:10px',@click='handleSave') 保存
        Button(@click='$router.go(-1)') 返回
</template>

<script>
import { asyncUser } from '../api'

export default {
  data() {
    return {
      title: '用户新增',
      roleItems: [],
      formValidate: {
        username: '',
        passwd: '',
        tel: '',
        email: '',
        role: ''
      },
      ruleValidate: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        passwd: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
        tel: [
          { message: '请输入联系方式', trigger: 'blur' },
          {
            pattern: /^((13[0-9])|14[5,7]|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|(147))\d{8}$/,
            message: '联系方式格式输入错误',
            trigger: 'blur'
          }
        ],
        email: [{ type: 'email', message: '邮箱地址格式错误', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    if (this.$route.query.status === 'modify') {
      this.title = '用户修改'
      this.handleUserData()
    } else {
      this.title = '用户新增'
    }
    this.handleQueryList()
    this.$nextTick(() => {
      this.$store.dispatch('breadcrumb/getBreadCrumb', [])
    })
  },
  methods: {
    handleUserData: async function() {
      try {
        const res = await asyncUser.get({ data: { userId: this.$route.query.userId } })
        const { user: { userName: username, pwd: passwd, cellPhone: tel, email }, userRole: role } = res.data.data
        this.formValidate = { username, passwd, tel, email, role }
      } catch (error) {}
    },
    handleQueryList: async function() {
      try {
        const res = await asyncUser.queryList({ data: {} })
        this.roleItems = res.data.data.map(item => {
          return { value: item.id, label: item.roleName }
        })
        if (this.$route.query.status === 'add') this.formValidate.role = res.data.data[0].id
      } catch (error) {}
    },
    handleSave() {
      this.$refs['userSet'].validate(async valid => {
        if (valid) {
          const { username: userName, passwd: pwd, tel: cellPhone, email, role: roleId } = this.formValidate
          try {
            if (this.$route.query.status === 'add') {
              await asyncUser.add({ data: Object.assign({ userName, pwd, cellPhone, email, roleId }, { loginName: this.formValidate.username }) })
              this.$Message.success('用户添加成功')
            }
            if (this.$route.query.status === 'modify') {
              await asyncUser.update({
                data: Object.assign({ userName, pwd, cellPhone, email, roleId }, { userId: this.$route.query.userId, loginName: this.formValidate.username })
              })
              this.$Message.success('用户修改成功')
            }
            this.$router.go(-1)
          } catch (error) {}
        }
      })
    }
  }
}
</script>
